<template>
<h1>双向绑定指令</h1>
  <!--双向绑定：将info变量与页面的元素进行绑定，效果：
    1）info 变量的数据会绑定到html元素上进行显示
    2）html元素发生改变，info的值也会随之改变-->
  <input type="text" v-model="info" >
  {{info}}
  <!--  <h1>{{info}}</h1>-->
  <!--  <a href="">{{info}}</a>-->
  <hr>
   <h3>登录页面</h3>
   <input type="text" placeholder="请输入用户名" v-model="user.name">
   <input type="password" placeholder="请输入密码" v-model="user.pwd">
  <br>
  性别：
  <input type="radio" name="gender" value="1" v-model="user.gender" >男
  <input type="radio" name="gender" value="0"  v-model="user.gender">女
  <button @click="f">登录</button>

</template>


<script setup>
  import {ref} from "vue";
  const info = ref('测试数据');

  // const  user = ref({name:'',pwd:'',gender:''});
  //显示的是默认值
  const  user = ref({name:'露丝',pwd:'666',gender:'0'});
  const  f = ()=>{
    console.log(user.value);
    console.log(user.value.name);
    console.log(user.value.gender);
    console.log(user.value.pwd);
  }

</script>



<style scoped>

</style>